<template>
	<div style="position: relative; width: 100%; height: 100%">
		<div ref="wrapRef" id="container"></div>
		``
		<div class="botdiv" v-if="stationlefttopdata">
			<div class="aaasd"></div>
			<a-card title="概况" size="small">
				<template #extra>
					<span v-if="stationlefttopdata.newWarnInfo" style="text-align: center; color: red">最新预警（{{ stationlefttopdata.newWarnInfo.warnCnName }} I {{ stationlefttopdata.newWarnInfo.stakeName }} 桩 I {{ stationlefttopdata.newWarnInfo.createTime }} ）</span>
					<a style="curpo" @click="goUrl(stationlefttopdata)">全景监控</a>
				</template>

				<div style="display: flex; justify-content: space-between">
					<div style="margin-right: 10px">
						<a-descriptions title="站详情" size="small" layout="vertical" bordered :column="{xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1}">
							<!-- <a-descriptions-item label="充电站名称">{{ stationlefttopdata.baseStationInfo.stationName }}</a-descriptions-item> -->
							<a-descriptions-item label="充电站地址">{{ stationlefttopdata.baseStationInfo.stationAddr }}</a-descriptions-item>
							<a-descriptions-item label="所属省份">{{ stationlefttopdata.baseStationInfo.province }}</a-descriptions-item>
							<a-descriptions-item label="所属运营商"> {{ stationlefttopdata.baseStationInfo.operatorId }}</a-descriptions-item>
							<!-- <a-descriptions-item label="联系电话"> {{ stationlefttopdata.baseStationInfo.contactPhone }}</a-descriptions-item> -->
							<a-descriptions-item label="直流桩数"> {{ stationlefttopdata.baseStationInfo.dcChargers }}</a-descriptions-item>
							<a-descriptions-item label="交流桩数"> {{ stationlefttopdata.baseStationInfo.acChargers }}</a-descriptions-item>
							<a-descriptions-item label="装机功率（千瓦）"> {{ stationlefttopdata.baseStationInfo.totalPower }}</a-descriptions-item>
						</a-descriptions>
					</div>
					<div>
						<a-collapse v-model:activeKey="activeKey" accordion ghost>
							<a-collapse-panel :key="item.stakeName" :header="'桩名称：' + item.stakeName" v-for="item in stakeList">
								<a-card size="small" borderd class="cardsOnes stakeMonitorMain" :canExpan="false">
									<div class="zhuangOns" :style="{opacity: item.astatus != null || item.bstatus != null ? '1' : '0.3'}">
										<a-space class="zhuangOnsTop flex justify-between">
											<span class="zhuangOnsTop_sapn1">{{ item.stakeName }}桩</span>
											<div>
												<a-space>
													<Icon style="color: #1890ff; font-size: 14px; margin-left: 8px" icon="fa6-solid:gun"> </Icon>
													<span style="cursor: pointer" @click="item.selectType = 'aa'" v-if="item.astatus != null">A枪</span>
													<a-divider type="vertical" />
													<span style="cursor: pointer" @click="item.selectType = 'bb'" v-if="item.bstatus != null">B枪</span>
												</a-space>
											</div>
										</a-space>
										<p class="zhuangOnsTop_p1">VIN：{{ item.selectType == 'aa' ? item.avin : item.bvin }}</p>
										<div v-show="item.selectType == 'aa'" class="zhuangOnsCenter">
											<div class="zhuangOnsCenterEcharts">
												<stakeMonitorpie :chartData="item.asoc" height="140px"></stakeMonitorpie>
											</div>
											<div class="zhuangOnsCenter_rt">
												<p>
													<span>目标充电量(soc)</span> <span>{{ item.atargetSoc }}%</span>
												</p>
												<p>
													<span>实时充电功率</span> <span>{{ item.arealtimePower }}千瓦</span>
												</p>
												<p>
													<span>实时充电电量</span> <span class="zhuangOnsCenter_rtp3span2">{{ item.arealtimeCapacity }}度</span>
												</p>
											</div>
										</div>
										<div v-show="item.selectType == 'bb'" class="zhuangOnsCenter">
											<div class="zhuangOnsCenterEcharts">
												<stakeMonitorpie :chartData="item.bsoc" height="140px"></stakeMonitorpie>
											</div>
											<div class="zhuangOnsCenter_rt">
												<p>
													<span>目标充电量(soc)</span> <span>{{ item.btargetSoc }}%</span>
												</p>
												<p>
													<span>实时充电功率</span> <span>{{ item.brealtimePower }}千瓦</span>
												</p>
												<p>
													<span>实时充电电量</span> <span class="zhuangOnsCenter_rtp3span2">{{ item.brealtimeCapacity }}度</span>
												</p>
											</div>
										</div>
										<div class="zhuangOnsBoM">
											<p style="margin-bottom: 0px">
												<span>
													<Icon icon="iconamoon:clock-fill" style="color: #1890ff; font-size: 14px; margin-left: 2px" />
													充电开始时间: {{ item.selectType == 'a' ? item.astartTime : item.bstartTime }}
												</span>
												<span>{{ item.selectType == 'a' ? item.achargingTime : item.bchargingTime }}</span>
											</p>
										</div>
									</div>
								</a-card>
							</a-collapse-panel>
						</a-collapse>
						<!-- <div class="stakeMonitorMain">
							<template v-for="(item, index) in stakeList">

							</template>
						</div> -->
						<!-- <a-empty v-else description="暂无数据" /> -->
					</div>
				</div>
			</a-card>
		</div>
		<div class="left_float">
			<div class="searchdiv">
				<a-input-search v-model:value="stationNamevalue" placeholder="搜索充电站" @search="onSearch" />
				<a-button @click="resetSearch">重置</a-button>
			</div>
			<div class="seletDetails" v-if="stationlefttopdata">
				<p class="p1">站名：{{ stationlefttopdata.baseStationInfo.stationName || '' }}</p>
				<!-- <p class="p1">地址：{{ stationlefttopdata.baseStationInfo.stationAddr || '' }}</p> -->

				<div>
					<a-tag color="#2db7f5">城市公共</a-tag>
					<a-tag color="#87d068">运营</a-tag>
				</div>
				<div class="seletDetails2">
					<img src="/@/assets/images/panoramicMonitoring/soc.png" alt="" />

					<div class="seletDetails22">
						<p>充电中</p>
						<p class="details22p2">{{ stationlefttopdata.chargeStakeNum }}辆</p>
					</div>
					<div class="seletDetails22">
						<p>今日充电量</p>
						<p class="details22p2">{{ stationlefttopdata.todayTotalCapacity }}度</p>
					</div>
					<div class="seletDetails22">
						<p>今日预警</p>
						<p class="details22p3">{{ stationlefttopdata.todayAlterNum }}个</p>
					</div>
				</div>
				<div class="btmtongji">
					<a-radio v-model:checked="checked">月</a-radio>
					<a-date-picker style="width: 100px" v-model:value="valueCharge" picker="month" valueFormat="YYYY-MM" @change="dateselect2" />
					<div class="seletDetails2" v-if="stationlefttopalldata">
						<div class="seletDetails22">
							<p>充电量</p>
							<p class="details22p2">{{ stationlefttopalldata.chargeCapacity }}</p>
						</div>
						<div class="seletDetails22">
							<p>充电次数</p>
							<p class="details22p2">{{ stationlefttopalldata.chargeTimes }}</p>
						</div>
						<div class="seletDetails22">
							<p>充电时长</p>
							<p class="details22p3">{{ stationlefttopalldata.chargeTimeLength || 0 }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="js" setup>
	import {JAreaSelect} from '/@/components/Form';
	import {defineComponent, ref, nextTick, unref, onMounted} from 'vue';
	import {stationMonitorstake, getgps, chargeMapsearch, chargeMapgetStationById, getStationAnalysis} from '@/api/screen/yewuapi.js';
	import defaultMarker from '@/assets/fileManagement/defaultMarker.png';
	import {useScript} from '/@/hooks/web/useScript';
	import {useRouter} from 'vue-router';
	import stakeMonitorpie from '@/views/panoramicMonitoring/SiteMonitoringDetails/tabsDiv/stakeMonitorComponent/stakeMonitorpie.vue';
	const activeKey = ref('1');
	const cityaaa = ref('50000');
	const router = useRouter();
	const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=dc81674b231824b7c4ca9dd8c72a9b4f&plugin=AMap.MarkerCluster';
	const {toPromise} = useScript({src: A_MAP_URL});
	const points = ref([
		{weight: 8, lnglat: ['116.506647', '39.795337']},
		{weight: 1, lnglat: ['116.843352', '40.377362']},
		{weight: 1, lnglat: ['116.637122', '40.324272']},
		{weight: 1, lnglat: ['116.105381', '39.937183']},
		{weight: 1, lnglat: ['116.653525', '40.128936']},
		{weight: 1, lnglat: ['116.486409', '39.921489']},
		{weight: 1, lnglat: ['116.658603', '39.902486']},
		{weight: 1, lnglat: ['116.338033', '39.728908']},
		{weight: 1, lnglat: ['116.235906', '40.218085']},
		{weight: 1, lnglat: ['116.366794', '39.915309']},
		{weight: 1, lnglat: ['116.418757', '39.917544']},
		{weight: 1, lnglat: ['116.139157', '39.735535']},
		{weight: 1, lnglat: ['116.195445', '39.914601']},
		{weight: 1, lnglat: ['116.310316', '39.956074']},
		{weight: 1, lnglat: ['116.286968', '39.863642']},
	]);
	const map = ref(null);
	const cluster = ref(null);
	const currentMarker = ref(null);
	const clusterText = ref(null);
	const stationlefttopdata = ref(null);
	const checked = ref(true);
	const valueCharge = ref('2025-06');
	const stationlefttopalldata = ref(null);
	const stationNamevalue = ref('天津武清城市综合充电示范站');
	const stationIdvalue = ref('');
	const chartsData = ref([]);

	onMounted(() => {
		// initMap();
		getMapData();
	});
	const getMapData = () => {
		getgps()
			.then((res) => {
				console.log('充电桩地图接口', res);
				points.value = res.map((item) => {
					return {
						...item,
						lnglat: [item.stationLng, item.stationLat],
						weight: 1,
					};
				});
				console.log('this.points ', points.value);
				initMap();
			})
			.catch(() => {});
	};
	function goUrl(record) {
		router.push({
			path: '/panoramicMonitoring/SiteMonitoringDetails',
			query: {
				// 传入当前的路由，登录成功后跳转到当前路由
				stationId: record.baseStationInfo.id,
			},
		});
	}
	function convertData(params) {
		var res = [];
		console.log(' this.chartsData222222', chartsData.value);
		for (var i = 0; i < chartsData.value.length; i++) {
			var geoCoord = this.geoCoordMap[chartsData.value[i].name];
			if (geoCoord) {
				res.push({
					name: chartsData.value[i].name,
					value: geoCoord.concat(chartsData.value[i].value),
					stationId: chartsData.value[i].stationId,
				});
			}
		}
		return res;
	}
	function resetSearch() {
		stationNamevalue.value = '';
		stationIdvalue.value = '';
		stationlefttopdata.value = null;
		stationlefttopalldata.value = null;
		clusterText.value == null ? '' : clusterText.value.remove();
		map.value.setZoom(5);
	}
	const stakeList = ref([]);
	function onSearch() {
		chargeMapsearch({name: stationNamevalue.value}).then((res) => {
			console.log('onSearch--chargeMapsearch', res, res[0].stationLat, res[0].stationLng);
			// map.value.setZoomAndCenter(12, [106.561215, 29.602383]); //同时设置地图层级与中心点

			map.value.setZoomAndCenter(8, [res[0].stationLng, res[0].stationLat]); //同时设置地图层级与中心点

			stationIdvalue.value = res[0].stationId;
			chargeMapgetStationById({id: res[0].stationId}).then((ress) => {
				console.log('chargeMapgetStationById', ress);
				stationlefttopdata.value = ress;
				stakeList.value = ress.chargingInfo;
				stakeList.value.forEach((item) => {
					item.selectType = item.astatus ? 'aa' : 'bb';
				});
				console.log('stationlefttopdatastationlefttopdatastationlefttopdata', stakeList.value);

				activeKey.value = stationlefttopdata.value.chargingInfo[0].stakeName;
				console.log('activeKeyactiveKeyactiveKey', activeKey.value);
			});
		});
	}

	function dateselect2(params) {
		console.log('dateselect2', params, valueCharge.value);
		getStationAnalysis({date: params, id: stationIdvalue.value, type: '1'}).then((ress) => {
			console.log('stationlefttopalldata', ress);
			stationlefttopalldata.value = ress;
		});
	}
	async function initMap() {
		await toPromise();
		await nextTick();
		map.value = new AMap.Map('container', {
			center: [104.937478, 35.439575],
			zoom: 5,
		});
		// tm  地图bug，聚合必须延时，就这个原因一直排查各种其他问题，最后发现是这个问题
		setTimeout(() => {
			mapRender();
		}, 100);
	}
	function mapRender() {
		let markers = [];

		map.value.clearMap();
		map.value.clearInfoWindow();
		if (cluster.value !== null) {
			cluster.value.clearMarkers();
			cluster.value = null;
		}
		for (var i = 0; i < points.value.length; i += 1) {
			let stationInfor = points.value[i];
			var temp = new AMap.Marker({
				position: [stationInfor['stationLng'], stationInfor['stationLat']],
				offset: new AMap.Pixel(-15, -15),
				content: markerContentInit(defaultMarker, false, 1, stationInfor),
			});
			temp.id = stationInfor.stationId;
			temp.stationInfor = stationInfor;
			// temp.on('mouseover', this.markerHover)
			// temp.on('mouseout', this.markerMouseOut)
			// temp.on('click', markerClick);
			markers.push(temp);
		}

		cluster.value = new AMap.MarkerCluster(map.value, points.value, {renderClusterMarker: _renderClusterMarker, gridSize: 80});
		cluster.value.on('click', (e) => {
			console.log('cluster.value.on', e, e.lnglat, e.lnglat.lng);

			if (e.clusterData.length == 1) {
				clusterText.value == null ? '' : clusterText.value.remove();
				clusterText.value = new window.AMap.Text({
					text: e.clusterData[0].stationName,
					anchor: 'center',
					offset: new window.AMap.Pixel(0, 0),
					style: {
						'margin-top': '25px',
						'margin-left': '5px',
						'border-radius': '.25rem',
						'background-color': 'white',
						'border-width': 0,
						'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
						'text-align': 'center',
						'font-size': '12px',
						color: 'black',
					},
					position: [e.lnglat.lng, e.lnglat.lat],
				});
				map.value.add(clusterText.value);
				stationNamevalue.value = e.clusterData[0].stationName;
				onSearch();
			} else {
				map.value.setZoomAndCenter(map.value.getZoom() + 3, [e.lnglat.lng, e.lnglat.lat]); //同时设置地图层级与中心点
			}
		});
		// if (this.$route.params.id) {
		// map.value.setZoomAndCenter(5, [117.202945, 39.082354]);
		// markers[0].setContent(markerContentInit(defaultMarker, true));
		// currentMarker.value = markers[0];
		// // }
		// map.value.setFitView(markers);
		// map.value.setZoom(5);
	}

	// 聚合样式
	function _renderClusterMarker(context) {
		// console.log('_renderClusterMarker', context);
		var factor = Math.pow(context.count / points.value.length, 1 / 18);
		var div = document.createElement('div');
		var Hue = 180 - factor * 180;
		var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
		var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
		var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
		var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
		div.style.backgroundColor = bgColor;
		var size = Math.round(30 + Math.pow(context.count / points.value.length, 1 / 5) * 20);
		div.style.width = div.style.height = size + 'px';
		div.style.border = 'solid 1px ' + borderColor;
		div.style.borderRadius = size / 2 + 'px';
		div.style.boxShadow = '0 0 5px ' + shadowColor;
		div.innerHTML = context.count;
		div.style.lineHeight = size + 'px';
		div.style.color = fontColor;
		div.style.fontSize = '14px';
		div.style.textAlign = 'center';
		context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
		context.marker.setContent(div);
	}
	function markerContentInit(markerPic, isBig, num, info) {
		// console.log(info, 'markerContentInit');
		let content = ``;
		if (num == 1) {
			content = `<div >
	          <img style="width:30px;height:30px;" class=${isBig ? 'img-out-big' : 'img-out'} src=${markerPic}>

	        </div>`;
		} else if (num == 2) {
			content = `<div >
	          <img style="width:30px;height:30px;" class=${isBig ? 'img-out-big' : 'img-out'} src=${markerPic}>


	        </div>`;
		} else {
			content = `<div >
	           <img style="width:30px;height:30px;" class=${isBig ? 'img-out-big' : 'img-out'} src=${markerPic}>


	        </div>`;
		}
		return content;
	}
</script>
<style scoped lang="less">
	:where(.css-dev-only-do-not-override-1sj3mhu).ant-card .ant-card-body {
		padding: 10px !important;
	}
	::deep(.ant-card-body) {
		padding: 0 !important;
	}
	::deep(.ant-card .ant-card-body) {
		padding: 0 !important;
	}
	.p1 {
		padding: 0rem !important;
		margin-bottom: 1px !important;
	}
	.searchdiv {
		display: flex;
	}
	#container {
		height: 100%;
		width: 100%;
	}
	.botdiv {
		position: absolute;
		bottom: 10px;
		// margin-left: -30vw;
		left: 0;
	}
	.toopdiv,
	.toopdiv1 {
		color: #1484ec;
		font-size: 14px;
		border: 1px solid #3f96aa;
		box-sizing: border-box;
		padding: 7px;

		.toopdivttitle {
			font-size: 18px;
			font-weight: 700;
			border-bottom: 1px solid #3f96aa;
			margin-bottom: 10px;
		}

		.cicle {
			display: inline-block;
			width: 5px;
			height: 5px;
			border-radius: 50%;
			margin-right: 5px;
			background-color: #1484ec;
		}

		.toopinlindiv p {
			margin-bottom: 3px;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			white-space: nowrap;
		}
	}
	.left_float {
		position: absolute;
		left: 0%;
		top: 1%;
		width: 300px;
		font-size: 16px;

		.seletDetails {
			background: white;
			padding: 10px;
			box-sizing: border-box;
			width: 360px;
			// height: 290px;
			border-radius: 5px;
			margin-top: 1px;
			border: 1px solid #bebebe;

			.seletDetails2 {
				margin-top: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				p {
					margin-bottom: 0px;
				}

				img {
					width: 30px;
					height: 30px;
				}

				.details22p2 {
					color: #1890ff;
					text-align: center;
				}

				.details22p3 {
					color: red;
				}
			}
		}
	}

	.stakeMonitorMain {
		width: 342px;
		display: flex;
		flex-wrap: wrap;

		.cardsOnes {
			margin-bottom: 1rem;
			box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

			&:hover {
				transform: scale(1.05);
				z-index: 11;
				border: 2px solid #00a096;
			}
		}

		.mr12px {
			margin-right: 1.25%;
		}
	}

	.cardsOnes {
		.zhuangOns {
			.zhuangOnsTop {
				.zhuangOnsTop_sapn1 {
					font-weight: 600;
					font-style: normal;
					font-size: 20px;
				}
			}

			.zhuangOnsTop_p1 {
				font-weight: 300;
				font-style: normal;
				font-size: 16px;
				color: rgba(0, 0, 0, 0.996);
				margin-bottom: 0em;
			}

			.zhuangOnsCenter {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.zhuangOnsCenterEcharts {
					// width: 40%;
				}

				.zhuangOnsCenter_rt {
					// width: 60%;

					p {
						display: flex;
						justify-content: space-between;
						font-size: 12px;

						span:nth-of-type(1) {
							font-weight: 300;
							color: #7d7d7d;
						}

						span:nth-of-type(2) {
							font-weight: 600;
							color: rgb(51, 51, 51);
						}
					}

					.zhuangOnsCenter_rtp3span2 {
						color: #30e7ba !important;
					}
				}
			}

			.zhuangOnsBoM {
				border-top: 1px dashed #c7c7c7;
				padding-top: 10px;

				p {
					display: flex;
					justify-content: space-between;

					> span {
						&:nth-of-type(1) {
							font-weight: 300;
							font-style: normal;
							font-size: 14px;
							color: rgba(125, 125, 125, 0.996);
						}

						&:nth-of-type(2) {
							font-weight: 600;
							color: rgb(51, 51, 51);
							font-size: 14px;
						}
					}

					.zhuangOnsBoMp2spann2 {
						color: red !important;
					}
				}
			}
		}
	}
</style>
